<template>
    <div class="edu-page-warp">
        <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="onSubmit"
            @reset="reset">
        <el-form :model="search" ref="search" label-width="80px">
            <el-row :gutter="40">
                <el-col :span="8">
                    <el-form-item label="年级:" prop="grade">
                        <el-date-picker
                            v-model="search.grade"
                            value-format="yyyy"
                            type="year"
                            placeholder="选择学年"
                            style="width: 100%"
                        />

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学院:">
                        <el-select v-model="search.departmentCode"
                        filterable
                        clearable style="width: 100%">
                            <el-option
                                v-for="item in options.facultys"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="开始时间:">
                        <el-date-picker
                            v-model="search.starttmie"
                            type="datetime"
                            format="yyyy/MM/dd HH:mm"
                            value-format = "timestamp"
                            align="right"
                            placeholder="选择开始日期"
                            style="width: 100%"
                            ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结束时间:">
                        <el-date-picker
                            v-model="search.endtime"
                            type="datetime"
                            format="yyyy/MM/dd HH:mm"
                            value-format = "timestamp"
                            placeholder="选择结束日期"
                            style="width: 100%"
                            ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        </ConditionCard>
        <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">培养方案开关</h1>
            <el-row>
                <el-col :span="24">
                    <div class="edu-opertion-bar">
                        <div class="float-right">
                            <el-button type="primary" @click="addTrainingSwitchList">新增</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-table 
                stripe 
                :data="trainingSwitchList" 
                size="mini" 
                cell-class-name="normal-cell"
                v-loading="loading">
                <!-- <el-table-column label="年级">
                    <template slot-scope="props">{{props.row.grade}}</template>
                </el-table-column> -->
                <el-table-column label="年级" width="80">
                    <template slot-scope="props">{{props.row.grade}}</template>
                </el-table-column>
                <!-- <el-table-column label="学院" show-overflow-tooltip>
                    <template slot-scope="props">{{props.row.bclPowerDeparmetList}}</template>
                </el-table-column> -->
                <el-table-column label="学院" min-width="180">
                    <template slot-scope="props">
                        <span class="bluebg" v-for="data in props.row.bclPowerDeparmetList" :key="data.id">
                            {{data.departmentCodeI18n}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" width="150">
                    <template slot-scope="props">{{props.row.starttmie | formatDate}}</template>
                </el-table-column>
                <el-table-column label="结束时间" width="150">
                    <template slot-scope="props">{{props.row.endtime | formatDate}}</template>
                </el-table-column>
                <el-table-column label="开关设置">
                    <template slot-scope="scope">
                        <el-switch
                            active-text="开"
                            inactive-text="关"
                            active-value="1"
                            inactive-value="0"
                            v-model="scope.row.openstatus"
                            @change="switchChange(scope.row)"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toEdit(scope.row)">编辑</el-button>
                        <el-button type="text" @click="toDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 新增/编辑 -->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogSwitchSettings"
            :close-on-click-modal="false"
            width="40%">
            <el-form
                ref="queryForm"
                :model="queryForm"
                label-position="right"
                label-width="90px"
                :rules="cultureSchemeRules">
                <!-- <el-row :gutter="24">           
                    <el-col :span="10">
                        <el-form-item :label="$t('message.startDate')+':'" prop="starttmie">  
                            <el-date-picker
                                style="width: 100%;"
                                v-model="queryForm.starttmie"
                                type="datetime"
                                placeholder="选择日期"
                        ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item :label="$t('message.endDate')+':'" prop="endtime">
                            <el-date-picker
                                style="width: 100%;"
                                v-model="queryForm.endtime"
                                type="datetime"
                                placeholder="选择日期"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>       
                </el-row> -->
                <el-row :gutter="24">           
                    <el-col :span="20">
                        <el-form-item :label="$t('message.startDate')+':'" prop="starttmie">  
                            <el-date-picker
                                style="width: 100%;"
                                v-model="queryForm.starttmie"
                                type="datetime"
                                placeholder="选择日期"
                        ></el-date-picker>
                        </el-form-item>
                    </el-col>   
                </el-row>
                <el-row :gutter="24">           
                    <el-col :span="20">
                        <el-form-item :label="$t('message.endDate')+':'" prop="endtime">
                            <el-date-picker
                                style="width: 100%;"
                                v-model="queryForm.endtime"
                                type="datetime"
                                placeholder="选择日期"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>       
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="20">
                        <el-form-item label="年级:" prop="grade">
                            <el-select v-model="queryForm.grade" 
                                multiple
                                clearable
                                style="width: 100%;">
                                <el-option
                                    v-for="item in options.grade"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="20" class="clearfix">
                        <el-form-item label="学院:" prop="bclPowerDeparmetList">
                            <el-select
                                v-model="queryForm.bclPowerDeparmetList"
                                style="width: 100%"
                                multiple
                                filterable
                                class="my-select"
                                @change="checkAll"
                            >
                                <el-option
                                    v-for="item in options.facultys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogSwitchSettings = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <el-row :gutter="0" class="bg-white">
            <el-col>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handlePageNumChange"
                :current-page="search.pageNum"
                :page-sizes="[20,50,100,500,1000]"
                :page-size="search.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search.total"
                style="float: right;margin:10px 60px 0 0;"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {schemeAddSet, schemefindResult, insertSchemePower, findSchemePower, updateSchemePower,deleteSchemePower } from "common/src/api/culture/bachelor";
import { queryDic } from "common/src/api/dictionary";
import filters from "common/src/filters";
import UTILS from "common/src/utils/utils";
export default {
     name: "bclCultureShcemeSetting",
    data() {
         //绑定年级
        let now = new Date();
        let currentYear = now.getFullYear(),
            minYear = currentYear - 10;
        let curGrade = [];
        for (let grade = currentYear+5; grade > minYear; grade--) {
            let obj = { label: grade, value: grade.toString() };
            curGrade.push(obj);
        }
        return {
            dialogTitle: '',
            dialogSwitchSettings: false,
            search: {
                grade: "",
                departmentCode: "",
                pageNum: 1,
                pageSize: 20,
                total: 0,
                starttmie: "",
                endtime: ""
            },
            trainingSwitchList: [],
            projId: null,
            queryForm: {
                id: '',
                openstatus: '', //开关
                deletestatus: '',//删除参数
                grade: [], // 年级
                bclPowerDeparmetList: [], // 学院
                starttmie: "", // 开始时间
                endtime: "", // 结束时间 
            },
            // 下拉相关选项数据
            options: {
                grade: curGrade,
                facultys: [],
            },
            cultureSchemeRules: {
                starttmie: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }
                ],
                endtime: [
                    {
                        required: true,
                        message: "请选择结束时间",
                        trigger: "change"
                    }
                ],
                grade: [
                    {
                        required: true,
                        message: "请选择年级",
                        trigger: "change"
                    }
                ],
                bclPowerDeparmetList: [
                    {
                        required: true,
                        message: "请选择学院",
                        trigger: "change"
                    }
                ],
            },
        };
    },
    created() {
        this.searchInfo();
        this.initOptions();
    },
    filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },
    methods: {
        // submit() {
        //     this.$refs['queryForm'].validate((valid) => {
        //         if (valid) {
        //             if (this.queryForm.starttmie && typeof(this.queryForm.starttmie) != 'number'){
        //                 this.queryForm.starttmie = this.queryForm.starttmie.getTime();
        //             }   
        //             if (this.queryForm.endtime && typeof (this.queryForm.endtime) != 'number'){
        //                 this.queryForm.endtime = this.queryForm.endtime.getTime();
        //             }
        //             this.queryForm.grade = Number(this.queryForm.grade);
        //             if (this.dialogTitle == '新增培养方案开关') {
        //                 this.queryForm.bclPowerDeparmetList = this.queryForm.bclPowerDeparmetList.map((item) => {
        //                     return {
        //                         'departmentCode': item
        //                     }
        //                 });
        //                 insertSchemePower(this.queryForm).then(res =>{
        //                     if (res.code == 200) {
        //                     this.$message({
        //                         type: 'success',
        //                         message: '新增成功!'
        //                     });
        //                     this.dialogSwitchSettings = false;
        //                     this.addReset();
        //                     this.searchInfo();
        //                     }
        //                 });
        //             } else if (this.dialogTitle == '修改培养方案开关') {
        //                 this.queryForm.bclPowerDeparmetList = this.queryForm.bclPowerDeparmetList.map((item) => {
        //                     return {
        //                         'departmentCode': item
        //                     }
        //                 });
        //                 if (this.queryForm.bclPowerDeparmetList.length > 0) {
        //                     this.queryForm.deletestatus = '0';
        //                             updateSchemePower(this.queryForm).then(res =>{
        //                             if (res.code == 200) {
        //                             this.$message({
        //                                 type: 'success',
        //                                 message: '修改成功!'
        //                             });
        //                             this.dialogSwitchSettings = false;
        //                             this.addReset();
        //                             this.searchInfo();
        //                         }
        //                     });
        //                 } else {
        //                     this.$message({
        //                         type: 'warning',
        //                         message: '请选择学院!'
        //                     });
        //                 }
        //             }
        //         }
        //     })  
        // },
        submit() {
            this.$refs['queryForm'].validate((valid) => {
                if (valid) {
                    if (this.queryForm.starttmie && typeof(this.queryForm.starttmie) != 'number'){
                        this.queryForm.starttmie = this.queryForm.starttmie.getTime();
                    }   
                    if (this.queryForm.endtime && typeof (this.queryForm.endtime) != 'number'){
                        this.queryForm.endtime = this.queryForm.endtime.getTime();
                    }
                    if(this.queryForm.endtime < this.queryForm.starttmie){
                        this.$message({
                            type: 'warning',
                            message: '开始时间不能大于结束时间'
                        });
                        return false;
                    }
                    this.queryForm.grade = this.queryForm.grade.toString();
                    if (this.dialogTitle == '新增培养方案开关') {
                        this.queryForm.bclPowerDeparmetList = this.queryForm.bclPowerDeparmetList.map((item) => {
                            return {
                                'departmentCode': item
                            }
                        });
                        insertSchemePower(this.queryForm).then(res =>{
                            if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            });
                            this.dialogSwitchSettings = false;
                            this.addReset();
                            this.searchInfo();
                            }
                        });
                    } else if (this.dialogTitle == '修改培养方案开关') {
                        this.queryForm.bclPowerDeparmetList = this.queryForm.bclPowerDeparmetList.map((item) => {
                            return {
                                'departmentCode': item
                            }
                        });
                        if (this.queryForm.bclPowerDeparmetList.length > 0) {
                            this.queryForm.deletestatus = '0';
                                    updateSchemePower(this.queryForm).then(res =>{
                                    if (res.code == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功!'
                                    });
                                    this.dialogSwitchSettings = false;
                                    this.addReset();
                                    this.searchInfo();
                                }
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '请选择学院!'
                            });
                        }
                    }
                }
            })  
        },
        //新增按钮
        addTrainingSwitchList() {
            this.dialogSwitchSettings = true;
            this.dialogTitle = '新增培养方案开关';
            this.queryForm.grade = [];
            this.queryForm.bclPowerDeparmetList = [];
            this.queryForm.starttmie = "";
            this.queryForm.endtime = "";
        },
        //编辑
        toEdit(row) {
            this.dialogTitle = '修改培养方案开关';
            this.dialogSwitchSettings = true;
            this.queryForm.id = row.id;
            this.queryForm.openstatus = row.openstatus;
            this.toEditList();
        },
        toEditList() {
            let data = {
                id: this.queryForm.id,
                pageNum: 20,
                pageSize: 1
            };
            findSchemePower(data).then((res) => {
                res.data.list.map((item) => {
                    item.bclPowerDeparmetList = item.bclPowerDeparmetList.map((item2) => {
                        return item2.departmentCode;
                    })
                });
                this.queryForm.bclPowerDeparmetList = res.data.list[0].bclPowerDeparmetList;
                this.queryForm.grade = res.data.list[0].grade.split(",");
                this.queryForm.endtime = res.data.list[0].endtime;
                this.queryForm.starttmie = res.data.list[0].starttmie;
            })
        },
        //删除
        toDelete(row) {
            this.$confirm("确认删除所选列表方案,是否继续?", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                type: "warning"
            })
            .then(() => {
                let data = {
                    id: row.id
                } 
                deleteSchemePower(data).then((res) => {
                    if(res.code==200){
                        this.$message({
                            type:'success',
                            message:'删除成功！'
                        })
                        this.searchInfo();
                    }
                })

            });
        },
        handleSizeChange(val) {
            this.search.pageSize = val;
            this.onSubmit();
        },
        handlePageNumChange(val) {
            this.search.pageNum = val;
            this.onSubmit();
        },
        onSubmit() {
            this.searchInfo();
        },
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    UTILS.fillSelect(
                        {
                            facultys: "X_YX"
                        },
                        res.data,
                        this.options
                    );
                    let allData = [{
                        key: 99999999,
                        label: '全部',
                        value: 99999999
                    }]
                    let facultys = this.options.facultys
                    this.options.facultys = [
                            ...allData,
                            ...facultys
                        ]
                    //this.queryForm.projId = Object.keys(res.data.X_GLBM)[0];
                    for (const key in res.data.X_GLBM) {
                        this.options["projId"].push({
                            value: key,
                            label: res.data.X_GLBM[key]
                        });
                    }
                }
            });
        },
        checkAll(){
           if(this.queryForm.bclPowerDeparmetList.indexOf(99999999) >- 1){
            //    if(this.queryForm.bclPowerDeparmetList){

            //    }
               this.queryForm.bclPowerDeparmetList = []
               this.options.facultys.forEach(d =>{
                   if(d.value != 99999999){
                       this.queryForm.bclPowerDeparmetList.push(d.value)
                   }
                   
               })
           } 
        },
        // 开关事件
        switchChange(row) {
            this.queryForm.id = row.id;
            this.queryForm.openstatus = row.openstatus;
            let data = {
                id: this.queryForm.id,
                pageNum: 1,
                pageSize: 20
            };
            findSchemePower(data).then((res) => {
                res.data.list.map((item) => {
                    item.bclPowerDeparmetList = item.bclPowerDeparmetList.map((item2) => {
                        return {
                          'departmentCode': item2.departmentCode
                        } 
                    })
                });
                this.queryForm.deletestatus = '0';
                this.queryForm.bclPowerDeparmetList = res.data.list[0].bclPowerDeparmetList;
                this.queryForm.grade = res.data.list[0].grade;
                this.queryForm.endtime = res.data.list[0].endtime;
                this.queryForm.starttmie = res.data.list[0].starttmie;
                if (this.queryForm.bclPowerDeparmetList.length > 0 ) {
                    updateSchemePower(this.queryForm).then(res =>{
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.addReset();
                            this.searchInfo();
                        }
                    });
                }
            })
        },
        addReset() {
            this.queryForm.openstatus = '';
            this.queryForm.grade = "";
            this.queryForm.bclPowerDeparmetList = [];
            this.queryForm.starttmie = "";
            this.queryForm.endtime = "";
        },
        // 查询重置
        reset() {
            this.search.grade = '';
            this.search.starttmie = "";
            this.search.endtime = "";
            this.search.departmentCode = "";
            this.searchInfo();
        },
        // 查询列表
        searchInfo() {
            findSchemePower(this.search).then((res) => {
                // res.data.list.map((item) => {
                //     item.bclPowerDeparmetList = item.bclPowerDeparmetList.map((item2) => {
                //         return item2.departmentCodeI18n;
                //     })
                //     item.bclPowerDeparmetList = item.bclPowerDeparmetList.toString();
                // });
                this.search.total = res.data.total_;
                this.trainingSwitchList = res.data.list;
            })
        }
    }
};
</script>

<style scoped>
    /*ie11 css hack*/ 
    @media all and (-ms-high-contrast:none) { 
        *::-ms-backdrop,.ie-hack{ height: 51.89px !important; }
    } 
    .div-main {
        margin-bottom: 16px;
    }
    .waining-color i{
       color:#1a68df;
       font-size: 24px;
    }
    .waining-color span{
        margin-left: 10px;
       font-size: 20px;
       font-weight: bold;
    }
    .line{
        text-align: center;
    }
    .bluebg{
        display: inline-block;
        margin: 2px;
        padding: 4px 10px;
        background-color: lightblue;
        color: #666;
        line-height: 1;
        vertical-align: middle;

    }
</style>
